<template>
    <!-- <Row>
        <Col span="12"> -->
            
            <Form ref="formValidate" :model="formValidate" :label-width="160">
                <div class="yd-header margin-top-8">
                    <span>基本信息</span>
                </div>
                <Row>
                    <Col span="12">
                        <FormItem label="签约商户:" prop="clientId">
                            {{formValidate.clientName}}
                        </FormItem>
                    </Col>
                    <Col span="10">
                        <FormItem label="客户签约主体" prop="clientMainId">
                            {{formValidate.clientMainName}}
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span="12">
                        <FormItem label="发票类型:" prop="type">
                            {{formValidate.typeName}}
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem label="纳税人识别号:" prop="taxpayerNum">
                            {{formValidate.taxpayerNum}}
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span="24">
                        <FormItem label="开票说明:" prop="declare">
                            {{formValidate.declare}}
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span="24">
                        <FormItem label="附件:" prop="file">
                            {{formValidate.file}}
                        </FormItem>
                    </Col>
                </Row>
                <div class="yd-header margin-top-8">
                    <span>接受信息</span>
                </div>
                <Row>
                    <Col span="12">
                        <FormItem label="收件人:" prop="receiver">
                            {{formValidate.receiver}}
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem label="电子邮箱:" prop="email">
                            {{formValidate.email}}
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span="12">
                        <FormItem label="联系电话:" prop="phone">
                            {{formValidate.phone}}
                        </FormItem>
                    </Col>
                    <Col span="12" >
                        <FormItem label="收件地址:" prop="address"  :class="{ 'ivu-form-item-required' : formValidate.type!=1 }">
                            {{formValidate.address}}
                        </FormItem>
                    </Col>
                </Row>
                <Tabs
                    :value="currentTab"
                    type="card"
                    :animated="false"
                    style="background:#f0f0f0;padding:10px;"
                    >
                    <TabPane label="账单详情" name="detail">
                        <Row>
                            <Col>
                                <FormItem label="开票总金额:" prop="interest">
                                    {{formValidate.amount}}
                                </FormItem>
                            </Col>
                        </Row>
                        <FormItem label="开票账单:">
                            <div class="fee">
                                <Row class="feehader">
                                    <Col span="4">收费项目</Col>
                                    <Col span="4">开票单价</Col>
                                    <!-- <Col span="4">未开票数量</Col>
                                    <Col span="4">未开票金额</Col> -->
                                    <Col span="4">申请开票设备数量</Col>
                                    <Col span="4">申请开票金额</Col>
                                </Row>
                                <div v-for="(item,index) in formValidate.invoices" :key="index">
                                    <Row class="feehader" style="margin-top:5px;">
                                        <Col span="8">账单编号： {{item.billSeqno}}</Col>
                                        <Col span="4">合同： {{item.billContractName}}</Col>
                                        
                                    </Row> 
                                    <Row v-for="(arritem,i) in item.invoices" :key="i">
                                        <Col span="4" class="border">{{capDevice(arritem.contentType)}}</Col>
                                        <Col span="4" class="border">{{arritem.contractPrice}}</Col>
                                        <!-- <Col span="4" class="border">{{arritem.totalUnInvoiceCount}}</Col>
                                        <Col span="4" class="border">{{arritem.totalUnInvoiceAmount}}</Col> -->
                                        <Col span="4" class="border">{{arritem.applyNum}}</Col>
                                        <Col span="4" class="border">
                                            {{arritem.applyNum*parseFloat(arritem.contractPrice)}}
                                        </Col>
                                    </Row> 
                                </div>
                            </div>
                        </FormItem>
                    </TabPane>
                    <TabPane label="操作记录" name="list">
                        <div v-for="(item,index) in formValidate.operations" :key="index" class="czjl">
                            <span class="time">{{item.createTime}}</span>
                            <div style="display:inline-block;">
                                <p>{{item.statusName}}</p>
                                <p>{{item.remark}}</p>
                            </div>
                        </div>
                    </TabPane>
                </Tabs>
            </Form>
        <!-- </Col>
    </Row> -->
    
</template>
<script>
import createInvoice from './components/create-invoicelist-modal'// 账单列表
import { http, api } from '@/libs/http'
export default {
  name: 'inner-account',
  components: {
    createInvoice
  },
  props: {
    id: String
  },
  data () {
    return {
      currentTab: null,
      totalPrice: 0, // 总金额
      loading: false,
      clientLoading: false, // 签约商户
      mangersignLoading: false, // 客户签约主体
      contractAddShow: false, // 新建发票显示
      aliOss: {}, // alioss
      action: '',
      contractTypeList: [
        {
          label: '新装合同',
          value: 1
        },
        {
          label: '售后合同',
          value: 2
        }
      ], // 合同类型列表
      modal: {
        show: false,
        device: []
      },
      areaModal: {
        show: false,
        city: [],
        type: 'country'
      },
      filterData: {

      },
      clients: [], // 商户
      mangersign: [], // 客户签约主体
      fee: [

        {
          title: '收费项目',
          key: 'deviceId',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('strong', this.capDevice(params.row.deviceId))
            ])
          }
        },
        {
          title: '设备单价(元)',
          key: 'price',
          align: 'center',
          render: (h, params) => {
            return h('FormItem', {
              props: {
                prop: 'contract_devices.' + params.index + '.price',
                rules: [{
                  required: true, message: 'Item ' + params.index + ' can not be empty', trigger: 'blur'
                }]
              }
            }, [
              h('Input', {
                props: {
                  type: 'text',
                  value: params.row.price// 此处如何让数据双向绑定
                },
                on: {
                  'on-change': (event) => {
                    params.row.price = event.target.value
                    this.formValidate.contract_devices[params.index] = params.row
                  }
                }
              })
            ])
          }
        },
        {
          title: '安装费',
          key: 'installFee',
          align: 'center'

        },
        {
          title: '数量',
          key: 'quantity',
          align: 'center'

        },
        {
          title: '操作',
          key: 'action',
          width: 150,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.handleDelete(params.index)
                  }
                }
              }, '删除')

            ])
          }
        }
      ], // 收费标准
      areaData: [], // 覆盖范围回显数据
      areaDataview: '', // 覆盖范围查看数据
      formValidate: {
        invoice: []// 设备收费列表数据

      },
      feeData: [

      ],
      demo: [
        {
          name: '账单编号：YDXZ2018101200001合同：云丁智能设备采购合同其他信息：2018年9月,新装账单-项目制，整个合同',
          arr: [{
            name: 'a3',
            age: 888,
            num: 50,
            money: 4400,
            fee: 1,
            count: 4400
          },
          {
            name: 'a3',
            age: 888,
            num: 50,
            money: 4400,
            fee: 1,
            count: 4400
          }]
        },
        {
          name: '账单编号：YDXZ2018101200001合同：云丁智能设备采购合同其他信息：2018年9月,新装账单-项目制，整个合同',
          arr: [{
            name: 'a3',
            age: 888,
            num: 50,
            money: 4400,
            fee: 1,
            count: 4400
          },
          {
            name: 'a3',
            age: 888,
            num: 50,
            money: 4400,
            fee: 1,
            count: 4400
          }]
        }
      ]

    }
  },
  created () {
    let id = this.$props.id
    this.handleInit(id)
    this.fetchModels()
  },
  methods: {
    handleSubmit (name) {
      this.loading = true
      this.$refs[name].validate((valid) => {
        if (valid) {
          if (!this.$props.id) { // 新增
            http.request(this, api.invoice_create, null, this.formValidate, (res, err) => {
              this.loading = false
              console.log(err, res)
              if (err || !res) return
              this.$Message.success('添加成功')
              this.$router.go(0)
            })
          } else { // 更新
            http.request(this, api.invoice_update, [this.$props.id], this.formValidate, (res, err) => {
              this.loading = false
              console.log(err, res)
              if (err || !res) return
              this.$Message.success('修改成功')
              this.$router.go(0)
            })
          }
        } else {
          this.loading = false
          this.$Message.error('请完整填写表单信息')
        }
      })
    },
    uploadSuccess (response, file) {
      console.log(file)
    },
    beforeUpload (file) {
      return new Promise((resolve, reject) => {
        http.fetch(this, api.alioss, null, null).then(res => {
          console.log(res)
          let aliOss = {
            policy: res.policy,
            OSSAccessKeyId: res.accessKeyId,
            success_action_status: '200', // 让服务端返回200,不然，默认会返回204
            // callback: callbackbody,
            key: new Date().valueOf() + file.name,
            signature: res.signature
          }
          this.aliOss = aliOss
          this.action = res.host
          resolve()
        })
      })
    },
    handleFeeAdd () {
      this.modal.show = true
    }, // 新增收费设备
    handleDelete (index) {
      this.formValidate.invoice.splice(index, 1)
      this.feeData.splice(index, 1)
    }, // 设备删除

    async getMangersign () {
      let res = (await http.fetch(this, api.client_overview, [this.formValidate.clientId], null)).contract_body
      this.mangersignLoading = false
      this.mangersign = res.map(item => {
        return {
          value: item.id + '',
          label: item.company_name,
          taxNo: item.tax_no
        }
      })
    }, // 客户签约主体

    remoteMethodMangersign () {
      if (!this.formValidate.clientId) {
        this.$Message.error('请选择签约商户')
      } else {
        this.mangersignLoading = true
        this.getMangersign()
      }
    }, // 客户签约主体select

    bill_begin_change () {

    }, // 开始时间
    bill_end_change () {

    }, // 结束时间
    capDevice (value) {
      let selectModels = JSON.parse(sessionStorage.getItem('device'))
      return selectModels.find((item) => {
        return value === item.id
      }).name
    }, // 过滤设备
    async handleInit (id) {
      this.formValidate = await http.fetch(this, api.invoice_info, [id], null)
      this.formValidate.clientMainId = this.formValidate.clientMainId + ''
      this.feeData = this.formValidate.invoices.map(item => {
        return item.billId
      })
    }, // 初始化数据
    clientChange (id) {
      console.log(id)
      this.getMangersign(id)
    }, // 签约商户改变
    async getInvoiceBill (ids) {
      let invoice = await http.fetch(this, api.invoice_bill, null, {ids: ids})
      invoice = invoice.map(item => {
        let arr = item.invoices.filter(i => {
          return i.totalUnInvoiceCount !== 0
        })
        item.invoices = arr
        return item
      })// 过滤为开票数量为0的数据
      this.$set(this.formValidate, 'invoices', invoice)
    }, // 账单列表
    async fetchModels () {
      let res = await http.fetch(this, api.enum, null, null)
      sessionStorage.setItem('device', JSON.stringify(res))
    }, // 设备
    handleClientMain (value) {
      this.formValidate.taxpayerNum = this.mangersign.find(item => {
        return value === item.value
      }).taxNo
    }// 纳税人识别号
  },
  watch: {
    feeData (val) {
      // this.getInvoiceBill(val);
    }
  }
}
</script>
<style lang="less" scoped>
    .flex{
        display: flex;
        align-items: center;
    }
    .flex-style {
        & > .ivu-col {
            display: flex;
            align-items: center;
            .flex-items {
                flex: 1;
                margin-left: 5px;
            }
        }
    }
    .item{
        margin-bottom: 24px;
        vertical-align: top;
        zoom: 1;
    }
    .border{
        border:1px solid #ccc;
        text-align: center;
    }
    .feehader{
        background:#ccc;
        .ivu-col{
            text-align:center;
        }
    }
    .czjl {
        margin-top:20px;
        display:flex;
        justify-content: start;
        .time {
            display:inline-block;
            width:150px;
            position: relative;
            &:before {
                display:block;
                content: ' ';
                position: absolute;
                right: 35px;
                top: 0;
                width: 20px;
                height:20px;
                border-radius: 50%;
                // background: green;
            }
        }
    }
</style>